<!-- 毕业生管理-->
<template>
    <div class="contenBox">
      
        <div class="leftTree">
            <!-- <Tree :data="treeData" @getLeftTree="getLeftTree"></Tree> -->
            <el-tree :data="treeData" :highlight-current="true" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
        </div>
        <div class="rightContent">
            <el-card>
                <ul style="margin-bottom:5px;">
                    <li>
                      <div class="searchBox">
                        <div class="searchTop">
                          <div class="studentName">
                            <div class="name">学生姓名：</div>
                            <el-input v-model="studentName" placeholder="请输入姓名"></el-input>
                          </div>
                          <div class="studentId">
                            <div class="xuehao">学号：</div>
                            <el-input v-model="studentId" placeholder="请输入学号"></el-input>
                          </div>
                        </div>
                        <div class="search">
                          <el-button @click="searchStudent">搜索</el-button>
                          <el-button @click="searchRest">重置</el-button>
                        </div>
                      </div>
                    </li>
                    <li>
                        <el-button type="primary" size="small" @click="addThegraduate">新增</el-button>
                        <el-button type="info" size="small" @click="exportBtn">导出</el-button>
                        <el-button type="info" size="small" @click="moreAddNum">批量生成毕业号</el-button>

                    </li>
                    <!-- <li>
                    </li> -->
                </ul>
                 <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" 
                 @selection-change="handleSelectionChange">
                    <el-table-column type="selection" > </el-table-column>
                    <el-table-column type="index" label="序号" width="50"> </el-table-column>
                    <el-table-column label="姓名" prop="name" width="80"></el-table-column>
                    <el-table-column prop="sex" label="性别" width="50">
                      <template slot-scope="scope">
                        <div>{{scope.row.gender == '40' ? '男' : '女' }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="grade" label="年级" width="130"></el-table-column>
                    <el-table-column prop="studentId" label="学号" width="130"></el-table-column>
                    <el-table-column prop="whether" label="是否符合毕业">
                      <template slot-scope="scope">
                        <div>{{scope.row.readConverterExp == '0' ? '是' : '否' }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="graduateId" label="毕业证号"></el-table-column>
                    <el-table-column label="操作" width="180">
                        <template slot-scope="scope">
                            <el-button type="text" size="mini" @click="edit(scope.row)">编辑</el-button>
                            <el-button type="text" size="mini" @click="screen(scope.row)">筛选</el-button>
                            <el-button type="text" size="mini" @click="print(scope.row)">打印</el-button>
                            <el-button type="text" size="mini" @click="del(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
            <div class="block" v-show="tableData.length > 0">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage"
                        :page-size="10"
                        prev-text="上一页"
                        next-text="下一页"
                        layout="prev, pager, next, jumper"
                        ref="pagination"
                        :total="total"
                    >
                    </el-pagination>
                    <el-button class="sure" type="primary">确定</el-button>
                </div>
        </div>
        
        
        <!-- 新增-->
        <div class="dialog">
            <el-dialog
                :title="isEdit ? '修改' : '添加' "
                :visible.sync="dialogVisible"
                width="1000"
                :before-close="handleClose">
                    <el-form ref="ruleForm" :model="ruleForm" label-width="80px">
                        <el-form-item label="姓名：">
                            <el-input v-model="ruleForm.name" placeholder="请填写姓名"></el-input>
                        </el-form-item>
                        <el-form-item label="性别：">
                             <el-select v-model="ruleForm.gender" placeholder="请选择">
                                <el-option
                                    v-for="item in option"
                                    :key="item.typeId"
                                    :label="item.typeName"
                                    :value="item.typeId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="所属院校：" prop="colleage">
                          <div class="addSelect">
                            <!-- <p class="superiorCollege">所属院校：</p> -->
                            <el-select
                              v-model="ruleForm.colleage"
                              clearable
                              placeholder="请选择"
                              @clear="infoHandleClear"
                              ref="infoSelectUpResId"
                            >
                              <el-option hidden :value="ruleForm.colleage" :label="infoUpResName">
                              </el-option>
                              <el-tree
                                :data="editSeletOptions"
                                :props="defaultProps"
                                :expand-on-click-node="false"
                                :check-on-click-node="true"
                                @node-click="infoHandleNodeClick"
                              >
                              </el-tree>
                            </el-select>
                          </div>
                        </el-form-item>
                        <el-form-item label="所属专业：" prop="major">
                          <div class="addSelect">
                          <!-- <p class="superiorCollege">所属专业：</p> -->
                          <el-select
                            v-model="ruleForm.major"
                            @change="majorSelect"
                            placeholder="请选择所属专业"
                          >
                            <el-option
                              v-for="item in editMajorOptions"
                              :key="item.majorId"
                              :label="item.majorName"
                              :value="item.majorId"
                            >
                            </el-option>
                          </el-select>
                          </div>
                        </el-form-item>
                        <el-form-item label="年级：">
                            <el-select
                                v-model="ruleForm.grade"
                                clearable
                                placeholder="请选择年级"
                                style="width: 200px"
                                >
                                <el-option v-for="item in gradetData" :key="item.typeId" :label="item.typeName" :value="item.typeId"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="班级：" prop="clbum">
                          <div class="addInput">
                            <el-select
                              v-model="ruleForm.clbum"
                              placeholder="请选择所属班级"
                            >
                              <el-option
                                v-for="item in classListData"
                                :key="item.classId"
                                :label="item.className"
                                :value="item.classId"
                              >
                              </el-option>
                            </el-select>
                          </div>
                        </el-form-item>
                        <el-form-item label="学号：">
                            <el-input v-model="ruleForm.studentId" placeholder="请填写学号"></el-input>
                        </el-form-item>
                        <el-form-item label="是否毕业：">
                           <el-select v-model="ruleForm.ifGraduation" placeholder="请选择">
                                <el-option
                                    v-for="item in option2"
                                    :key="item.id"
                                    :label="item.label"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <!-- <el-form-item label="毕业证号">
                            <el-input v-model="ruleForm.sex" placeholder="请输入毕业证号"></el-input>
                        </el-form-item> -->
                    </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
                </span>
            </el-dialog>
        </div>
        <el-dialog
          title="选择毕业策略"
          :visible.sync="screenDialogVisible"
          width="1000"
          class="screenDialogVisible"
          :before-close="handleClose">
          <div>
             <el-table
          ref="multipleTable"
          :data="infoTableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column type="index" label="序号" width="55">
          </el-table-column>
          <el-table-column
            label="条件名称"
            prop="strategyName"
          ></el-table-column>
          <el-table-column prop="strategyType" label="条件类型">
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间">
          </el-table-column>
          <!-- <el-table-column prop="state" label="状态">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.state"
                active-color="#13ce66"
                inactive-color="#C2C2C2"
                @change="updateIsUsing(scope.row)"
              >
              </el-switch>
            </template>
          </el-table-column> -->
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="selectStrategy(scope.row)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
          </div>
        </el-dialog>
        <el-dialog
          title="毕业证书模板"
          :visible.sync="printDialogVisible"
          width="1000"
          class="screenDialogVisible"
          :before-close="handleClose">
          <div>
             <el-table
              ref="multipleTable"
              :data="infoCertificateList"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
            <el-table-column type="selection" align="content"> </el-table-column>
              <el-table-column type="index" label="序号" align="content">
              </el-table-column>
              <el-table-column label="证书名称" prop="certificateName" align="content">
              </el-table-column>
              <el-table-column label="证书背景图" prop="certificateSettingImg" align="content">
              <!-- <template slot-scope="scope">
                <el-image
                  style="width: 50px; height: 50px; margin-bottom:-4px"
                  :src="`https://xxx.com${scope.row.certificateSettingImg}`"
                >
                </el-image>
              </template> -->
               <template slot-scope="scope">
                <el-image
                  style="width: 50px; height: 50px; margin-bottom:-4px"
                  :src="scope.row.certificateSettingImg"
                >
                </el-image>
              </template>
              </el-table-column>
              <el-table-column label="证书分类" prop="certificateType" align="content">
              </el-table-column>
              <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="selected(scope.row)">选择</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-dialog>

        <!-- <el-button type="primary" v-show="false" v-print="printObj" @click="dsss">打印</el-button> -->
       <el-dialog
          title="筛选"
          :visible.sync="detail"
          width="1000"
          class="screenDialogVisible"
          :before-close="handleClose">
          <div>
            <img id="printMe" class="imgUrl" style="width:100%;height:500px;" :src="imgUrl" alt="">
          </div>
          <div>
            <el-button type="text" size="mini" v-print="printObj" @click="sureBtn">确定</el-button>
            <el-button type="text" size="mini" @click="quxiao">取消</el-button>

          </div>
       </el-dialog>

    </div>
    
</template>
<script>
// import { getScoreListApi } from "@/api/achievement/studentscore";
import {
  getSexApi,
  getGraduationStrategyApi,
  screenThegraduateApi,
  colleageTreeDataApi,
  majorListApi,
  getClassGradeListApi,
  getGradeListApi,
  leftTreeListApi,
} from "@/api/graduation/thegraduate.js"
import {
  GraduateList,
  GraduateAdd,
  GraduateDel,
  GraduateEdit,
  Graduateduate,
  // printApi,
  GraduateThegraduateApi
  // GraduateAute
} from "@/api/graduation/Complete";
import {
  CertificateList,
  Certificatedeta
} from "@/api/graduation/Graduationtemplate";
// import {
//   getClassGradeListApi,
// } from "@/api/basics/classGrade";
export default {
  data() {
    return {
      printObj: {
        id: "printMe", //打印区域 Dom ID
        popTitle: "成绩单详情",
        extraCss: "https://www.google.com,https://www.google.com",
        extraHead:
          '<meta http-equiv="Content-Language"content="zh-cn"/>,<style> #printMe { height: auto !important; } <style>', //  可以传进去  style tag 标签；注意要逗号分隔   解决特定区域不显示问题；
      },
      // 左侧树模拟数据
      treeData: [
        {
          id: 1,
          label: "学院",
          children: [
            {
              id: 12,
              label: "体育专业",
              children: [
                {
                  id: 24,
                  label: "计算机1班"
                },
                {
                  id: 25,
                  label: "财经一班"
                },
                {
                  id: 26,
                  label: "2021级2101班"
                }
              ]
            },
            {
              id: 13,
              label: "艺术专业",
              children: [
                {
                  id: 24,
                  label: "计算机1班"
                },
                {
                  id: 25,
                  label: "财经一班"
                },
                {
                  id: 26,
                  label: "2021级2101班"
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      },
      tableData: [],
      dialogVisible:false,
      dialogVisible2:false,
      form:{},
      option:[],
      option2:[
        {id:0,label:'是'},
        {id:1,label:'否'},
      ],
      classListData:[], // 班级列表名称
      classListData1:[], // 班级列表名称
      form2:{},
      total:0,  // 总条数
      currentPage:1,
      ruleForm:{
        name:"",
        gender:"",
        grade:"",
        studentId:"",
        // certificateId:"",
        colleage:"",
        major:"",
        clbum:"",
        ifGraduation:''
      },
      isEdit:false, // 修改  / 添加弹框标识
      editItemId:'', // 点击修改id
      filename:"毕业信息表",
      screenDialogVisible:false,
      infoTableData:[], // 弹框table数据
      logItemId:'', // 获取筛选id
      infoUpResName:'',
      editMajorOptions:[],  // 专业数据
      gradetData:[],  //年级数据
      studentName:"",
      studentId:'',
      editSeletOptions:[],
      infoCertificateList:[],
      printDialogVisible:false,
      detail:false,
      certificateName:'',
      classify:'',
      imgUrl:'',
      inid:[],
    };
  },
  mounted() {
    document.getElementsByClassName(
      "el-pagination__jump"
  )[0].childNodes[0].nodeValue = "跳到第";
    this.thegraduateList()
    getSexApi({parentId:39}).then(res=>{
      console.log(res);
      this.option = res.rows
    })
    

    getGraduationStrategyApi().then(res=>{
      console.log(res);
      this.infoTableData = res.rows
    })
    this.editSelectTreeData()
    getGradeListApi({parentId:55}).then(res=>{
      console.log(res);
      this.gradetData = res.rows
    })

   leftTreeListApi().then(res=>{
      console.log(res,'--------------------');
      this.treeData = res.data
      res.data.forEach(item=>{
        console.log(item.children);
        if(item.children && item.children.length > 0) {
          item.children.forEach(ite=>{
            ite.label = ite.majorName
            if(ite.children.length > 0) {
              ite.children.forEach(it=>{
                it.label = it.className
              })
            }
          })
        }
      })
      
    })

    CertificateList().then(res=>{
      console.log(res);
      this.infoCertificateList = res.rows
    })
  },
  methods: {
    dsss(){

    },
    sureBtn() {

    },
    quxiao() {},
    selected(row) {
      console.log(row,'88ww');
      this.detail = true
      Certificatedeta({id:row.id}).then(res=>{
        console.log(res);
        this.certificateName = row.certificateName
        this.imgUrl = row.certificateSettingImg
        this.classify = row.certificateType

      })
      this.$confirm("是否确定选择该模板", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          // .then(() => {
          //   let obj = {
          //     templateId:row.id,
          //     studentId:this.printId
          //   }
          //   printApi(obj).then(res=>{
          //     console.log(res,'1222222222');
          //     if(res.code === 200) {
          //       this.imgUrl = res.msg
          //     }
          //   })
              
          // })
          .catch(() => {});

    },
    print(row) {
      console.log(row);
      this.printId = row.id
      this.printDialogVisible = true
    },
    infoHandleClear() {},
    // 专业事件
    majorSelect(id) {
      console.log(id);
      this.getMajorIdClass(id)
    },
    infoHandleNodeClick(data) {
      console.log(data);
      this.infoUpResName = data.label;
      this.ruleForm.colleage = data.id;
      // 选择器执行完成后，使其失去焦点隐藏下拉框的效果
      this.$refs.infoSelectUpResId.blur();
      this.editSelectValueHandler(data.id)
    },
    async editSelectTreeData() {
      const data = await colleageTreeDataApi();
      this.editSeletOptions = data.data;
    },

    // 新增所属专业下拉框
    async editSelectValueHandler(id) {
      console.log(id,'-----------');
      // console.log(id, "arr");
      const data = await majorListApi({ colleageId: id, status:'0'});
      console.log(data);
      this.editMajorOptions = data.rows;
    },

    // 根据专业id查询班级
    async getMajorIdClass(id) {
     const data = await getClassGradeListApi({majorId:id})
      this.classListData = data.rows
      console.log(data,'-------->班级');
      // this.getCourseData(id)

    },

    searchStudent() {
      let obj = {
        name:this.studentName,
        studentId:this.studentId,
      }
      this.thegraduateList(obj)
    },
    searchRest() {
      this.thegraduateList()
    },

    // 列表
    thegraduateList(obj) {
      getSexApi({parentId:55}).then(res=>{
        console.log(res);
        this.classListData1 = res.rows
      })
      GraduateList({...obj,pageSize:'10',pageNum:this.currentPage}).then(res=>{
        console.log(res);
        if(res.code === 200) {
          this.tableData = res.rows
          this.total = res.total
          this.tableData.forEach(item=>{
            this.classListData1.forEach(it=>{
              if(item.grade == it.typeId) {
                item.gradeName = it.typeName
              }
            })
          })
        }
      })
    },
    //点击左侧树的事件
    handleNodeClick(data) {
      console.log(data);
      if(data.id) {
        this.thegraduateList({colleage:data.id})
      }else if(data.classId) {
        this.thegraduateList({colleage:data.colleageId,major:data.majorId,clbum:data.classId})
      }else {
        this.thegraduateList({colleage:data.colleageId,major:data.majorId})
      }
      // getScoreListApi({ colleageId: data.id }).then(res => {
      //   // console.log(res,'点击左侧树');
      //   this.tableData = res.rows;
      // });
    },
    //分页
    handleSizeChange(val) {
      console.log(val);
      // this.queryParams.pageSize = val;
      // this.getList();
    },
    handleCurrentChange(val) {
      console.log(val);
      // this.queryParams.pageNum = val;
      // this.getList();
      this.thegraduateList()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      var arrTostring = [];
      console.log(val)
      val.forEach(item => {
        if (arrTostring.indexOf(item.id) === -1) {
          arrTostring.push(item.id*1);
        }
      });
      this.inid = arrTostring;
      console.log('33',this.inid)
    
    },
    handleClose(done){
        done()
    },

    selectStrategy(row) {
      console.log(row,'row');
      console.log(this.logItemId,'row2');
      let obj = {
        studentId:this.logItemId,
        strategyId:row.id
      }
      screenThegraduateApi(obj).then(res=>{
        console.log(res,'刘');
        if(res.code === 200) {
          this.$message({
            type: "success",
            message: "选择毕业策略成功!"
          });
          this.dialogVisible = false
        }else {
          this.$message({
            type: "error",
            message: "选择毕业策略失败!"
          });
        }
      })
    },

    addThegraduate() {
      this.isEdit = false
      this.dialogVisible = true
      this.ruleForm = {}
      this.infoUpResName = ""
    },
    //修改
    edit(row){
      console.log(row);
        this.ruleForm = row
        this.editItemId = row.id
        this.isEdit = true
        this.dialogVisible = true
        this.ruleForm.gender = row.gender
        this.ruleForm.grade = row.grade
        this.ruleForm.colleage = row.colleage
        this.ruleForm.major = row.major
        this.ruleForm.clbum =row.clbum
        this.ruleForm.ifGraduation = row.ifGraduation


    },

    // 添加 /  修改
    submitForm(formName) {
      console.log(this.ruleForm);
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if(!this.isEdit) {
              GraduateAdd(this.ruleForm).then(res=>{
                if(res.code === 200) {
                    this.$message({
                      type: 'success',
                      message: '添加成功',
                    });
                    this.thegraduateList()
                    this.dialogVisible = false
                  }else {
                    this.$message({
                      type: 'error',
                      message: '添加失败',
                    });
                  }
              })
            }else {
              GraduateEdit({id:this.editItemId,...this.ruleForm}).then(res=>{
                if(res.code === 200) {
                  this.$message({
                    type: 'success',
                    message: '修改成功',
                  });
                  this.thegraduateList()
                  this.dialogVisible = false
                }else {
                  this.$message({
                    type: 'error',
                    message: '修改失败',
                  });
                }
              })
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    // 批量生成毕业号
    moreAddNum() {
      GraduateThegraduateApi(this.inid).then(res=>{
        console.log(res);
        if(res.code === 200) {
          this.$message({
            type: "success",
            message: "生成毕业号成功!"
          });
          this.thegraduateList()
        }else {
          this.$message({
            type: "error",
            message: "生成毕业号失败!"
          });
          this.thegraduateList()
        }
      })
    },

    // 筛选
    screen(row) {
      console.log(row);
      this.logItemId = row.id
      this.screenDialogVisible = true
    },

    // 导出
    exportBtn() {
      this.$confirm("是否导出全部数据？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
              Graduateduate().then((res)=>{
                console.log(res)
                if (!res) return;
                const blob = new Blob([res], {
                  type: "application/vnd.ms-excel",
                }); // 构造一个blob对象来处理数据，并设置文件类型
                if (window.navigator.msSaveOrOpenBlob) {
                  //兼容IE10
                  navigator.msSaveBlob(blob, this.filename);
                } else {
                  const href = URL.createObjectURL(blob); //创建新的URL表示指定的blob对象
                  const a = document.createElement("a"); //创建a标签
                  a.style.display = "none";
                  a.href = href; // 指定下载链接
                  a.download = this.filename; //指定下载文件名
                  console.log(this.filename);
                  a.click(); //触发下载
                  URL.revokeObjectURL(a.href); //释放URL对象
                }
              })
              // const a = document.createElement("a"); //创建a标签
              // a.href = `${HOST}/common/download?fileName=${res.msg}`; // 指定下载链接
              // a.click(); //触发下载
          })
          .catch(() => {});
    },

    del(id){
      this.$confirm("确认删除记录吗?", "提示", {
        type: "warning",
      }).then(() => {
        GraduateDel({id}).then(res=>{
            if(res.code === 200) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.thegraduateList()
            }else {
              this.$message({
                type: "error",
                message: "删除失败!"
              });
            }
          })
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.contenBox {
  // min-width: calc(100vh - 200px);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  background-color: #f3f2f7;
  padding: 0 20px 20px 15px;
  box-sizing: border-box;

  .leftTree {
    width: 250px;
    // height: 100%;
    // overflow-y: auto;
    // min-height:calc(100vh - 95px);
    background-color: #fff;
    // padding: 15px 15px;
    border-radius: 5px;
    box-sizing: border-box;

    // .tac{
    //   width: 300px;

    //   ::v-deep .el-col-12{
    //     min-height:calc(100vh - 220px);
    //     height: 500px;
    //     overflow-y: auto;
    ::v-deep .el-tree {
      width: 250px;
    }
    ::v-deep .el-tree > .el-tree-node .el-tree-node__content {
      height: 56px;
      position: relative;
      .el-tree-node__expand-icon {
        position: absolute;
        right: 0;
        bottom: 14px;
        transform: rotate(-90deg);
        font-size: 18px;
      }
      .el-tree-node__label {
        font-size: 16px;
        margin-left: 10px;
      }
      .el-tree-node__expand-icon.expanded {
        transform: rotate(0deg);
      }

      .el-icon-caret-right:before {
        content: "\e6df";
      }
    }

    ::v-deep.el-menu {
      border: none;
    }

    // ::v-deep .el-submenu.is-active .el-submenu__title {
    //   color: #409eff;
    // }

    // ::v-deep .el-submenu .el-menu-item {
    //   height: 40px;
    //   line-height: 40px;
    // }

    // ::v-deep .el-menu-item.is-active {
    //   border-right: solid 2px #409eff;
    // }

    // ::v-deep .el-submenu__icon-arrow {
    //   transform: rotateZ(-90deg);
    //   font-size: 16px;
    // }

    // ::v-deep .el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow {
    //   transform: rotateZ(0deg);
    //   color: #409eff;
    // }

    // ::v-deep .el-submenu.is-opened .el-submenu__title {
    //   color: #409eff;
    // }
  }

.screenDialogVisible ::v-deep .el-dialog{
  width: 1000px;
}
  .rightContent {
    flex: 1;
    min-width: calc(100vh - 250px);
    // width: 100%;
    margin-left: 15px;
    padding-right: 10px;
    // background-color: #fff;
    border-radius: 5px;
    box-sizing: border-box;
    ul {
      // display: flex;
      flex-direction: row;
      justify-content: space-between;
      li .searchBox{
        .searchTop{
          display: flex;
          align-items: center;
          .studentName{
            display: flex;
            align-items: center;
            .name{
              width: 40%;
            }
          } 
          .studentId{
            display: flex;
            align-items: center;
            .xuehao{
              width: 100px;
              text-align: right;
            }
          }
          
        }
        .search{
          margin-left: 10px;
          display: flex;
          // margin-top: 10px;
        }
        margin-bottom: 10px;
        display: flex;
        align-items: center;
      }
    }
    
    .block {
        padding: 0 20px 0 0;
        height: 65px;
        display: flex;
        align-items: center;
        justify-content: right;
        background-color: #fff;

        ::v-deep .btn-prev {
        border: solid 1px #e6e6e6;
            border-radius: 5px;
            color: #6f6f6f;
        }

        ::v-deep .btn-next {
            border: solid 1px #e6e6e6;
            border-radius: 5px;
            color: #6f6f6f;
        }
        ::v-deep .el-pager li {
            background: #fff;
            font-size: 13px;
            min-width: 30.5px;
            height: 28px;
            line-height: 28px;
            box-sizing: border-box;
        }

        ::v-deep .el-pager li.active {
            background-color: #4895db;
            color: #fff;
            cursor: default;
        }
        ::v-deep .number {
            border: solid 1px #e6e6e6;
            margin: 0 5px;
            border-radius: 5px;
            color: #6f6f6f;
        }
        ::v-deep .el-button {
            height: 28px;
            line-height: 0;
        }
        .sure {
            width: 50px;
            height: 30px;
            line-height: 0;
            text-align: center;
            padding: 0;
        }
    }
  }
  .dialog {
    .block {
      width: 280px;
      height: 30px;
      border: solid 1px #dcdfe6;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      background-color: #fff;

      ::v-deep .el-input__inner {
        width: 240px;
        height: 28px;
        border: none;
      }

      ::v-deep .el-icon-arrow-down {
        color: #c2c2c2;
        padding: 0 10px 0 0;
      }

      ::v-deep .el-icon-arrow-up {
        color: #c2c2c2;
        padding: 0 10px 0 0;
      }

      ::v-deep .el-date-picker.has-sidebar {
        left: 460px !important;
        background-color: #4895db;
      }
    }

    .mb,
    .px {
      ::v-deep .el-form-item__content {
        display: flex;
        width: 280px;
        line-height: 30px;
        border: solid 1px #dcdfe6;
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 5px;

        .el-input__inner {
          border: none;
        }

        span {
          font-size: 14px;
          padding-left: 5px;
          color: #888;
        }
      }
    }

    ::v-deep .el-dialog {
      max-width: 750px;
      min-width: 500px;
      border-radius: 10px;
      background-color: #f9f9f9;
    }

    ::v-deep .el-dialog__header {
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      background-color: #4895db;
      padding: 0;
      border-radius: 10px 10px 0 0;

      span {
        font-size: 16px;
        color: #fff;
      }
    }

    ::v-deep .el-select > .el-input {
      display: block;
      width: 300px;
    }

    ::v-deep .el-form-item__label {
      line-height: 32px;
      width: 120px !important;
    }

    ::v-deep .el-input__inner {
      height: 30px;
      line-height: 30px;
    }

    ::v-deep .el-dialog__headerbtn {
      top: 15px;
    }

    ::v-deep .el-dialog__headerbtn .el-dialog__close {
      color: #fff;
      font-size: 18px;
    }

    ::v-deep .el-dialog--center .el-dialog__body {
      text-align: initial;
      display: flex;
      justify-content: center;
    }

    ::v-deep .el-input__icon {
      line-height: 30px;
    }

    ::v-deep .el-form-item__content {
      width: 300px;
      line-height: 30px;
      margin-left: 0 !important;
    }

    ::v-deep .el-form-item {
      margin-bottom: 15px;
      display: flex;
      justify-content: center;
    }

    ::v-deep .el-dialog__footer {
      padding: 10px 20px 40px;
    }

    
    // ::v-deep .el-button + .el-button {
    //   border-radius: 20px;
    //   margin-left: 50px;
    //   background-color: #4895db;
    //   border-color: #4895db;
    // }
  }
}
</style>
